<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }
        #myCanvas {
            border: 1px solid #9C9898;
        }
    </style>
</head>
<body>
<canvas id = "myCanvas" width = "800px" height = "500px"></canvas>

<button id="x1">线</button>
<button id="x2">矩形</button>
<button id="x3">圆</button>

<script>

//    var canvas = document.getElementById("myCanvas");
//    var context = document.getElementById("myCanvas").getContext("2d");

    $("#x1").on("click",function () {
        //画直线
        context.beginPath();
        context.strokeStyle = "#000000";
        context.moveTo(50, 50);
        context.lineTo(400, 200);
        context.stroke();
    });

    $("#x2").on("click",function () {
        //画矩形
        context.beginPath();
        context.strokeStyle = "#ce0000";
        context.rect(100,100,350,150);
        context.stroke();
    });

    $("#x3").on("click",function () {
        //画圆
        context.beginPath();
        context.strokeStyle = "#009100";
        context.arc(300,300,100,0,2*Math.PI, true);
        context.stroke();
    });

    class Draw {
        constructor(canvas, context,color) {
            this.canvas = canvas;
            this.context = context;
            this.color = color;
        }
    }

    class drawLine extends Draw {
        constructor(canvas, context,color) {
            super(canvas, context,color); // 记得用super调用父类的构造方法!
        }
        drawing() {
            context.beginPath();
            context.strokeStyle = this.color;
            context.moveTo(50, 50);
            context.lineTo(400, 200);
            context.stroke();
        }
    }

    let line = new drawLine();
    //line.constructor("myCanvas","2d","#000000");
    line.canvas="myCanvas";
    line.context="2d";
    line.color="#000000";
    line.drawing();







</script>

</body>
</html>